<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="sendJSONP()">测试jsonp</button>
    <script>
      // 利用了script的src不受同源策略影响
      // jsonp发不了其他的请求 get 并不是Ajax
      // src=地址?callback=回调函数方法名&name=zhangsan&keyword=123
      // params查询参数 它是一个对象 callback是回调函数
      function jsonp(url, params = {}, callback) {
        if (!url) throw new Error("The URL Paramter is Required")
        const script = document.createElement("script") // 创建一个元素
        const funcName = `callback${Date.now()}${~~(Math.random() * 1000)}` // 方法名肯定是独一无二
        const paramsArr = Object.keys(params).map(
          (key) => `${key}=${params[key]}`
        )
        // ?callback=回调函数方法名&name=zhangsan&keyword=123
        script.src =
          url + "?" + [`callback=${funcName}`, ...paramsArr].join("&")
        window[funcName] = function (data) {
          // data 就是通过jsonp手段获取过来的数据
          callback && callback(data) // 将数据传入回调 并且调用
          // script 标签应该删掉
          document.body.removeChild(script) // 删除标签
          delete window[funcName] // 删除这个方法
        }
        document.body.appendChild(script)
      }
      const baseURL = "http://www.liulongbin.top:3006"
      function sendJSONP() {
        jsonp(`${baseURL}/api/jsonp`, { a: 1, b: 2, c: 3, d: 4 }, (data) => {
          // data就是拿到的数据
          console.log(data)
        })
      }
    </script>
  </body>
</html>
